<template>
  <div id="zhe" style="width: 100%; height: 100%"></div>
</template>

<script>
import request from "../utils/request";

export default {
  name: "Test-bing",
  data() {
    return {
      dataList: "",
    };
  },
  methods: {
    getData() {
      setInterval(() => {
        request.get("/cov/f2").then((res) => {
          this.dataList = res.data;
          this.initEcharts();
        });
      }, 3000);
    },
    initEcharts() {
      var chartDom = document.getElementById("zhe");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "近五日新增人数折线图",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["第一日", "第二日", "第三日", "第四日", "第五日"],
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          textStyle: {
            color: "#fff",
          },
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            itemStyle: {
              normal: {
                color: '#00ff25', //改变折线点的颜色
                lineStyle: {
                  color: '#00ff73' //改变折线颜色
                }
              }
            },
            axisLabel: {
              //修改坐标系字体颜色
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
</style>
